<template>
  <div>
    <div class="header_con">
      <div class="header">
        <div class="welcome fl">欢迎来到美多商城!</div>
        <div class="fr">
          <div>
            <div class="login_btn fl" v-if="!username">
              <a href="/#/login">登录</a>
              <span>|</span>
              <a href="/#/reg">注册</a>
            </div>
            <div class="user_link fl" v-else>
              欢迎您：<em>{{username}}</em>
              <span>|</span>
              <a href="/#/index_1">返回主页</a>
              <span>|</span>
              <a href="/#/userinfo">用户中心</a>
              <span>|</span>
              <a href="/#/cart_1">我的购物车</a>
              <span>|</span>
              <a href="user_center_order.html">我的订单</a>
            </div>

          </div>

        </div>
      </div>
    </div>

    <div class="search_bar clearfix">
      <a href="index.html" class="logo fl"><img src="../../static/images/logo.png"></a>
      <div class="search_wrap fl">
        <form method="get" action="/search/" class="search_con">
          <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
          <input type="submit" class="input_btn fr" name="" value="搜索">
        </form>
        <ul class="search_suggest fl">
          <li><a href="#">索尼微单</a></li>
          <li><a href="#">优惠15元</a></li>
          <li><a href="#">美妆个护</a></li>
          <li><a href="#">买2免1</a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "headers",
  data(){
    return{
      username:localStorage.getItem('username')
    }
  }
}
</script>

<style scoped>

</style>
